<template>
	<div id="index">
		<header>
			<div class="header_1">
				<router-link to="/user/recharge">
					<img src="../../static/img/home-01.png"/>
				</router-link>
				<div class="search">
					<input id="searchInput" @focus="focus" type="text" placeholder="搜索你喜欢的宝贝" v-model="search" />
					<img @click="Search" src="../../static/img/home-15.png"/>
				</div>
				<router-link to="/user/makegold">
					<img src="../../static/img/home-02.png"/>
				</router-link>
			</div>
			<div class="header_2">
				<ul>
					<li v-for="item in classifyList" @click="classify(item.id)" :class="classify_num == item.id?'classify_active':''">{{item.name}}</li>
				</ul>
			</div>
		</header>
		<!-------轮播----------->
		<div id="banner">
			<swiper :options="swiperOption">
				<swiper-slide v-for="item in imgList">
					<img :src="item.imgPath" @click="$router.push(item.path)"/>
				</swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>
		<!--------功能列表---------->
		<nav>
			<router-link :to="{path: 'good', query:{newUser: now}}">
				<img src="../../static/img/home-03.png"/>
				<p>新人必中</p>
			</router-link>
			<router-link to="/user/shareUser">
				<img src="../../static/img/home-04.png"/>
				<p>分享赚钱</p>
			</router-link>
			<router-link :to="{path: 'good', query:{jd: now}}">
				<img src="../../static/img/home-05.png"/>
				<p>京东试用</p>
			</router-link>
			<router-link :to="{path: 'good', query:{group: now}}">
				<img src="../../static/img/home-06.png"/>
				<p>参团</p>
			</router-link>
			<router-link to="/user/vip">
				<img src="../../static/img/home-07.png"/>
				<p>VIP</p>
			</router-link>
			<router-link :to="{path: 'good', query:{high: now}}">
				<img src="../../static/img/home-08.png"/>
				<p>高价值</p>
			</router-link>
			<router-link to="/user/WinningRate">
				<img src="../../static/img/home-09.png"/>
				<p>中奖秘籍</p>
			</router-link>
			<router-link to="/user/luckyDraw">
				<img src="../../static/img/home-10.png"/>
				<!--<p>赚钱秘籍</p>-->
				<p>金币抽奖</p>
			</router-link>
		</nav>
		<!------------公告--------------->
		<div class="notice" v-show="noticeList.length>0">
			<img class="logo" src="../../static/img/logo-01.png"/>
			<p>播报</p>
			<img class="notice_icon" src="../../static/img/home-11.png"/>
			<swiper :options="swiperOption2">
				<swiper-slide v-for="item in noticeList">
					<span>[{{item.userName}}]</span><p>中了<span class="task_name">{{item.task.taskName}}</span></p>
				</swiper-slide>
			</swiper>
			<!--<ul class="notice_list">
				<li v-for="item in noticeList"><span>[{{item.userName}}]</span><p>中了</p><span class="task_name">{{item.task.taskName}}</span></li>
			</ul>-->
		</div>
		<!-----------限时秒杀，金币兑换--------------->
		<!--<div class="seckill_exchange">
			<div @click="$router.push('/secKill')" class="seckill">
				<p class="home_title"><span></span>限时秒杀</p>
				<div class="countdown">
					<div v-if="skill" style="display: flex;"><p>{{hour}}</p><span>:</span><p>{{minute}}</p><span>:</span><p>{{second}}</p></div>
					<div v-else style="font-size: 0.5rem;margin-top:-0.2rem;">14-21点开抢</div>
				</div>
				<img src="../../static/img/remove-01.png"/>
			</div>
			<div @click="$router.push('/exchange')" class="exchange">
				<p class="home_title"><span></span>金币兑换</p>
				<p class="exchange_p">天天爆款换不停</p>
				<img src="../../static/img/remove-02.png"/>
			</div>
		</div>-->
		<!------------今天上新-------------->
		<div class="new" v-if="newList.length>4">
			<div class="new_title">
				<p class="home_title"><span></span>今日上新</p>
				<img src="../../static/img/home-12.png"/>
			</div>
			<div class="new_list">
				<div v-for="item in newList.slice(0,4)" class="new_item" @click="apply(item.id)">
					<div class="good_img">
						<img src="../../static/img/imgLoading.png"/>
						<div class="img_box">
							<img :src="item.goodsImage"/>
						</div>
					</div>
					<p>¥{{item.price}}</p>
					<input type="button" value="免费申请" @click="apply(item.id)" />
				</div>
			</div>
		</div>
		<!-----------潮流女装 时尚男装-------------->
		<div class="home_1">
			<div v-show="girlList.length>4" class="girl">
				<img @click="$router.push({path: '/home/good', query: {classify: 1}})" src="../../static/img/home-13.png"/>
				<ul class="girl_list">
					<li v-for="item in girlList.slice(0,5)" class="girl_item" @click="apply(item.id)">
						<div class="good_img">
							<img src="../../static/img/imgLoading.png"/>
							<div class="img_box">
								<img :src="item.goodsImage"/>
							</div>
						</div>
						<p>{{item.taskName}}</p>
						<div id="price">
							<p>¥{{item.price}}</p>
							<!--<p>{{item.applyNum}}人申请</p>-->
						</div>
					</li>
				</ul>
			</div>
			<div v-show="boyList.length>4" class="boy">
				<img @click="$router.push({path: '/home/good', query: {classify: 2}})" src="../../static/img/home-14.png"/>
				<ul class="boy_list">
					<li v-for="item in boyList.slice(0,5)" class="boy_item" @click="apply(item.id)">
						<div class="good_img">
							<img src="../../static/img/imgLoading.png"/>
							<div class="img_box">
								<img :src="item.goodsImage"/>
							</div>
						</div>
						<p>{{item.taskName}}</p>
						<div id="price">
							<p>¥{{item.price}}</p>
							<!--<p>{{item.applyNum}}人申请</p>-->
						</div>
					</li>
				</ul>
			</div>
			<div v-show="shoesList.length>4" class="boy">
				<img @click="$router.push({path: '/home/good', query: {classify: 3}})" src="../../static/img/home-16.png"/>
				<ul class="boy_list">
					<li v-for="item in shoesList.slice(0,5)" class="boy_item" @click="apply(item.id)">
						<div class="good_img">
							<img src="../../static/img/imgLoading.png"/>
							<div class="img_box">
								<img :src="item.goodsImage"/>
							</div>
						</div>
						<p>{{item.taskName}}</p>
						<div id="price">
							<p>¥{{item.price}}</p>
							<!--<p>{{item.applyNum}}人申请</p>-->
						</div>
					</li>
				</ul>
			</div>
			<div v-show="makeupList.length>4" class="boy">
				<img @click="$router.push({path: '/home/good', query: {classify: 9}})" src="../../static/img/home-17.png"/>
				<ul class="boy_list">
					<li v-for="item in makeupList.slice(0,5)" class="boy_item" @click="apply(item.id)">
						<div class="good_img">
							<img src="../../static/img/imgLoading.png"/>
							<div class="img_box">
								<img :src="item.goodsImage"/>
							</div>
						</div>
						<p>{{item.taskName}}</p>
						<div id="price">
							<p>¥{{item.price}}</p>
							<!--<p>{{item.applyNum}}人申请</p>-->
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!-----------排序选择------------>
		<div class="screen">
			<div @click="screen_num = 1" :class="screen_num == '1'?'screen_active':''">
				<p>最新</p>
				<img :src="screen_num == '1'?'./static/img/arrow-02.png':'./static/img/arrow-01.png'"/>
			</div>
			<div @click="screen_num = 3" :class="screen_num == '3'?'screen_active':''">
				<p>价值</p>
				<img :src="screen_num == '3'?'./static/img/arrow-02.png':'./static/img/arrow-01.png'"/>
			</div>
			<div @click="screen_num = 5" :class="screen_num == '5'?'screen_active':''">
				<p>人气</p>
				<img :src="screen_num == '5'?'./static/img/arrow-02.png':'./static/img/arrow-01.png'"/>
			</div>
		</div>
		<!----------任务列表------------>
		<div class="home_2">
			<div v-for="item in taskList" class="task_item" @click="apply(item.id)">
				<div class="task_img">
					<div class="good_img">
						<img src="../../static/img/imgLoading.png"/>
						<div class="img_box">
							<img :src="item.goodsImage"/>
						</div>
					</div>
					<span v-if="item.type == 5">首单99%中奖</span>
				</div>
				<div class="task_text">
					<div class="task_title">
						<img :src="item.paltform==1?'./static/img/tb.png':(item.paltform==2?'./static/img/tm.png':'./static/img/jd.png')"/>
						<p>{{item.taskName}}</p>
					</div>
					<div class="task_price">
						<p>¥{{item.price}}</p>
						<p v-if="(item.type==3||item.type==7)&&(item.taskList==null||item.taskList.surplusNum<1)">今日份额已满</p>
						<p v-else-if="item.type==3||item.type==7">距开奖仅差<span style="color: #FF6565;">{{item.taskList.groupsNumber - item.taskList.currentGroupNumber}}</span>人</p>
						<!--<p v-else>{{item.applyNum}}人申请</p>-->
					</div>
					<div class="task_input"> 
						<input style="background-color: #ccc;" type="button" v-if="(item.type==3||item.type==7)&&(item.taskList==null||item.taskList.surplusNum<1)" value="立即参团" />
						<input type="button" v-else-if="item.type==3||item.type==7" value="立即参团" @click="apply(item.id)" />
						<input type="button" v-else value="免费申请" @click="apply(item.id)" />
						<p @click.stop="$router.push('/user/shareUser')">分享赚<span>12元</span></p>
					</div>
				</div>
			</div>
		</div>
		<div class="loading">
			<img src="../../static/img/loading.gif" width="40" height="40" v-if="loading"/>
			<!--<p v-else>---------------已经到底了---------------</p>-->
			<p v-else><img src="../../static/img/nodata.png" width="50%"/></p>
		</div>
		<!--------新用户奖励------------>
		<img v-show="isshow" @click="newUser = true" id="open_new_user" src="../../static/img/newuser-04.png"/>
		<span v-show="isshow" @click="isshow = false" id="close">X</span>
		<div v-show="newUser" id="new_user">
			<div class="new_user">
				<div class="new_content">
					<img src="../../static/img/newuser-01.png"/>
					<ul class="new_user_text">
						<li><span></span><p>新用户申请组团不中奖励<span class="new_red">0.3元现金</span></p></li>
						<li><span></span><p>新用户注册赠送<span class="new_orange">100金币</span></p></li>
						<li><span></span><p>新用户进行三次申请赠送<span class="new_orange">100金币</span></p></li>
						<li><span></span><p>金币可兑换必中机会</p></li>
						<li><span></span><p>金币可兑换会员</p></li>
						<router-link to="/home/good">
							<img src="../../static/img/newuser-02.png"/>
						</router-link>
					</ul>
				</div>
				<img @click="newUser = false" src="../../static/img/newuser-03.png"/>
			</div>
		</div>
	</div>
</template>
<script>
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import banner1 from '../../static/img/banner-01.png'
//import banner2 from '../../static/img/banner-02.png'
import banner2 from '../../static/img/banner-05.png'
import banner3 from '../../static/img/banner-03.png'
import banner4 from '../../static/img/banner-04.gif'
export default{
	name:'index',
	data:function(){
		return{
			skill: false, // 是否在限时秒杀期间
			newUser: true,//新用户奖励 开关
			isshow: true,//新用户奖励小红包显示隐藏
			search: '',//搜索输入内容
			classify_num: 0,//分类选中判断参数
			hour: '06',//倒计时 时
			minute: '00',//倒计时 分
			second: '00',//倒计时 秒
			screen_num: '1',//筛选选中判断参数
			//--------分类列表---------
			classifyList: [
				{
					name:'全部',
					id: 0
				},
				{
					name:'女装',
					id: 1
				},
				{
					name:'男装',
					id: 2
				},
				{
					name:'鞋包',
					id: 3
				},
				{
					name:'百货',
					id: 4
				},
				{
					name:'母婴',
					id: 5
				},
				{
					name:'配饰',
					id: 6
				},
				{
					name:'电器',
					id: 7
				},
				{
					name:'家居',
					id: 8
				},
				{
					name:'美妆',
					id: 9
				},
				{
					name:'食品',
					id: 10
				},
				{
					name:'车品',
					id: 11
				},
				{
					name:'其他',
					id: 12
				},
			],
			//------轮播图片组----------
			imgList: [
		  		{
		  			imgPath:banner2,
		  			path: '/user/shareUser'
		  		},
		  		{
		  			imgPath:banner1,
		  			path: '/home/good'
		  		},
		  		{
		  			imgPath:banner4,
		  			path: '/auction'
		  		},
		  		{
		  			imgPath:banner3,
		  			path: '/home/good?newUser=' + new Date().getTime()
		  		},
		  	],
		  	//---------轮播组件-----------
			swiperOption: {
				autoplay: {
				    delay: 3000,
				    stopOnLastSlide: false,
				    disableOnInteraction: false,
				},  //是否自动轮播
				loop: true,　　//是否循环轮播
				pagination : {el:'.swiper-pagination'}, //轮播图中下标点显示
			},
			//---------公告轮播组件-----------
			swiperOption2: {
				autoplay: {
				    delay: 5000,
				    stopOnLastSlide: false,
				    disableOnInteraction: false,
			    },
				loop: true,//
				direction : 'vertical',//竖向滚动
				allowTouchMove: false,//禁止触摸滑动
			},
			//---------公告列表------------
			noticeList: [
				
			],
			//------------今天上新列表---------------
			newList:[
				{
					Src: '../../static/img/remove-03.png',
					price: '78',
				},
				{
					Src: '../../static/img/remove-03.png',
					price: '80',
				},
				{
					Src: '../../static/img/remove-03.png',
					price: '58',
				},
				{
					Src: '../../static/img/remove-03.png',
					price: '90',
				},
			],
			//------------女装列表--------------
			girlList:[],
			//------------男装列表--------------
			boyList:[],
			//-----------鞋包列表--------------
			shoesList:[],
			//-----------美妆列表--------------
			makeupList:[],
			taskList:[],
			now: '', // 时间戳
			page: 1, // 当前页码
			totalPage: 2, // 总页数
			loading: true,
		}
	},
	components: {
	   swiper,
	   swiperSlide
	},
	methods:{
		focus:function(){
			$('#searchInput').css('text-align','left');
			$('#searchInput').blur(function(){
				$('#searchInput').css('text-align','center');
			})
		},
		Search: function(){
			this.$router.push({path:'/home/good',query:{taskName:this.search}})
		},
		classify:function(n){
			this.classify_num = n;
			this.$router.push({path: '/home/good', query: {classify: this.classify_num}})
		},
		countTime: function () {
            //获取当前时间
            var date = new Date();
            var now = date.getTime();
            //设置开始时间
            var beginDate = new Date(this.getDate(date) + "14:00:00");
            var begin = beginDate.getTime();
            if(now < begin){
            	this.skill = false;
            	return;
            }
            //设置截止时间
            var endDate = new Date(this.getDate(date) + "21:00:00");
            var end = endDate.getTime();
            //时间差
            var leftTime = end - now;
            //定义变量 d,h,m,s保存倒计时的时间
            if (leftTime >= 0) {
            	this.skill = true;
//              var d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
                this.hour = this.getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
                this.minute = this.getzf(Math.floor(leftTime / 1000 / 60 % 60));
                this.second = this.getzf(Math.floor(leftTime / 1000 % 60));
            	//递归每秒调用countTime方法，显示动态时间效果
            	setTimeout(this.countTime, 1000);
            }else{
            	this.skill = false;
            }
            //递归每分钟调用countTime方法，判断是否到时间了
            setTimeout(this.countTime, 60000);
        },
		newWinner: function(){
			var _this = this;
			let postData = _this.$qs.stringify({
	        	startPage:1,
	        	pageSize:4
	        });
			_this.$axios.post('/user/taskSchedule/public/selectNewWinner', postData).then(function(res){
			    var data = res.data.result;
			    _this.noticeList = data;
			}).catch(function (error) {
			    console.log(error);
			});
		},
		
		newGoods: function(){
			var _this = this;
			let postData = _this.$qs.stringify({
				newGoods: 1,
	        	startPage:1,
	        	pageSize:4
	        });
			_this.$axios.post('/user/task/public/selectByCondition', postData).then(function(res){
			    var data = res.data.result;
			    _this.newList = data.list;
			}).catch(function (error) {
			    console.log(error);
			});
		},
		girl: function(){
			var _this = this;
			let postData = _this.$qs.stringify({
				goodsType: '女装',
	        	startPage:1,
	        	pageSize:5
	        });
			_this.$axios.post('/user/task/public/selectByCondition', postData).then(function(res){
			    var data = res.data.result;
			    _this.girlList = data.list;
			}).catch(function (error) {
			    console.log(error);
			});
		},
		boy: function(){
			var _this = this;
			let postData = _this.$qs.stringify({
				goodsType: '男装',
	        	startPage:1,
	        	pageSize:5
	        });
			_this.$axios.post('/user/task/public/selectByCondition', postData).then(function(res){
			    var data = res.data.result;
			    _this.boyList = data.list;
			}).catch(function (error) {
			    console.log(error);
			});
		},
		shoes: function(){
			var _this = this;
			let postData = _this.$qs.stringify({
				goodsType: '鞋包',
	        	startPage:1,
	        	pageSize:5
	        });
			_this.$axios.post('/user/task/public/selectByCondition', postData).then(function(res){
			    var data = res.data.result;
			    _this.shoesList = data.list;
			}).catch(function (error) {
			    console.log(error);
			});
		},
		makeup: function(){
			var _this = this;
			let postData = _this.$qs.stringify({
				goodsType: '美妆',
	        	startPage:1,
	        	pageSize:5
	        });
			_this.$axios.post('/user/task/public/selectByCondition', postData).then(function(res){
			    var data = res.data.result;
			    _this.makeupList = data.list;
			}).catch(function (error) {
			    console.log(error);
			});
		},
		task: function(){
			var _this = this;
			if(_this.page > _this.totalPage){
				_this.loading = false;
				return;
			}
			let postData = _this.$qs.stringify({
				orderBy: _this.screen_num,
	        	startPage: _this.page,
	        	pageSize: 10
	        });
			_this.$axios.post('/user/task/public/selectByCondition', postData).then(function(res){
			    var data = res.data;
			    if(data.message == "succ"){
			    	data = data.result;
			    	_this.totalPage = data.pages;
			    	if(_this.page == 1){
			    		_this.taskList == [];
			    	}
					if(data.total <= 10){
						_this.loading = false;
					}
			    	for(var i = 0; i < data.list.length; i++){
				    	_this.taskList.push(data.list[i]);
				    }
			    }else{
			    	console.log(data.result);
			    }
			}).catch(function (error) {
			    console.log(error);
			});
		},
		apply: function(taskId){
			this.$router.push({name: 'taskDetail',params:{ taskId: taskId}});
		},
		//--------日期转换-----------
		getDate: function(str){  
			if(str == ""||str ==null){
				return "";
			}
		    var oDate = new Date(str),  
		    oYear = oDate.getFullYear(),  
		    oMonth = oDate.getMonth()+1,  
		    oDay = oDate.getDate(),  
		    oTime = oYear +'-'+ this.getzf(oMonth) +'-'+ this.getzf(oDay) +' ';//最后拼接时间  
		    return oTime;  
		},
		
		//补0操作  
		getzf:function(num){  
		    if(parseInt(num) < 10){  
		        num = '0'+num;  
		    }  
		    return num;  
		},
		lazyLoad: function(){
			var _this = this;
   			//变量scrollTop是滚动条滚动时，距离顶部的距离
   			var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
   			//变量windowHeight是可视区的高度
   			var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
   			//变量scrollHeight是滚动条的总高度
   			var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
            //滚动条到底部的条件
            if(scrollTop+windowHeight==scrollHeight){
            	if(_this.loading){
	                //写后台加载数据的函数
	         		_this.page++;
	         		_this.task();
            	}
            }   
       },
        setCookie: function (cname, cvalue, exdays) {
		    var d = new Date();
		    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
		    var expires = "expires=" + d.toDateString();
		    document.cookie = cname + "=" + cvalue + "; " + expires;
		},
		//获取cookie
		getCookie: function (cname) {
		    var arr, reg  = new RegExp("(^| )" + cname + "=([^;]*)(;|$)");
		    if (arr = document.cookie.match(reg))
		        return (arr[2]);
		    else
		        return null;
		},
	},
	created: function(){                                             
		var invite = this.$route.query.invite;
		if(invite!=''&&invite!=null&&invite!=undefined){
			this.setCookie("invite",invite,2);
		}
		this.newWinner();
		this.newGoods();
		this.girl();
		this.boy();
		this.shoes();
		this.makeup();
		this.now = new Date().getTime();
		var newuser = this.getCookie(`newuser`);
		if(newuser){
			this.newUser = false;
		}else{
			this.setCookie(`newuser`,'1', 1);
		}
		this.countTime();
		this.task();
	},
	watch: {
		screen_num(){
			this.taskList = [];
			this.page = 1;
			this.loading = true;
			this.task();
		}
	},
	mounted:function(){
		var _this = this;
    	setTimeout(function(){
    		document.addEventListener('scroll', _this.lazyLoad);
    	}, 1000);
	},
	destroyed: function(){
		document.removeEventListener('scroll', this.lazyLoad);
	}
}
</script>

<style scoped>
/* ========== */
/* = Header = */
/* ========== */
header{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #fff;
	z-index: 10;
}
.header_1{
	display: flex;
	align-items: center;
	padding: 1rem;
	box-sizing: border-box;
}
.header_1 a img{
	height: 2.5rem;
	display: block;
}
.search{
	display: flex;
	align-items: center;
	background-color: #f0f0f0;
	width: calc(100% - 7rem);
	border-radius: 50px;
	height: 2.5rem;
	padding-left: 1.5rem;
	box-sizing: border-box;
	margin: 0 1rem;
}
.search img{
	height: 1.5rem;
	display: block;
}
.search input{
	border: none;
	background-color: transparent;
	height: 100%;
	width: calc(100% - 3rem);
	text-align: center;
	font-size: 1.4rem;
	color: #4F4F4F;
}
.header_2 ul{
	width: 100%;
	display: -webkit-box;
	overflow-x: auto;
	font-size: 1.4rem;
	height: 4rem;
}
.header_2 ul li{
	margin: 0 1rem;
	color: #4F4F4F;
	text-align: center;
	height: 4rem;
	line-height: 4rem;
	border-bottom: 2px solid transparent;
	box-sizing: border-box;
}
.header_2 ul li.classify_active{
	color: #FF6565;
	border-bottom: 2px solid #FF6565;
}
/* ========== */
/* = Banner = */
/* ========== */
#banner{
	margin-top: 8rem;
	background-color: #fff;
}
#banner .swiper-slide{
	width: 100%;
}
#banner .swiper-slide img{
	width: 100%;
	display: block;
}
/* ========== */
/* = Nav = */
/* ========== */
nav{
	display: flex;
	flex-wrap: wrap;
	background-color: #fff;
	padding-top: 0.5rem;
}
nav a{
	width: 25%;
	margin-bottom: 1rem;
}
nav a img{
	height: 4rem;
	display: block;
	margin: 0 auto;
	margin-bottom: 0.5rem;
}
nav a p{
	font-size: 1rem;
	text-align: center;
	color: #4f4f4f;
}
/*------公告---------*/
.notice{
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
	align-items: center;
	padding: 1rem;
/*	border-top: 1px solid #F8D37E;*/
	border-top: 1px solid #a9a9a938;
/*	background-color: #FFFBDB;*/
	background-color: #FFF;
	font-size: 1.4rem;
	color: #4F4F4F;
	margin-bottom: 1rem;
	width: 100%;
    overflow: hidden;
    height: 4rem;
    box-sizing: border-box;
}
.notice .logo{
	height: 1.6rem;
	display: block;
	margin-right: 0.5rem;
}
.notice .notice_icon{
	height: 1.4rem;
	display: block;
	margin: 0 0.5rem;
}
.notice .swiper-container{
	height: 2rem;
	margin: 0;
	width: calc(100% - 13rem);
}
.notice .swiper-container,.notice .swiper-wrapper{
	height: 100%;
	margin: 0;
}
.notice .swiper-slide{
	height: 2rem;
	display: flex;
	align-items: center;
}
.notice .swiper-slide p{
	overflow: hidden;
	white-space: nowrap;
	/*display: inline-block;*/
	text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
}
.notice .swiper-slide span{
	color: #FF6565;
	white-space: nowrap;
}
/*-----------限时秒杀，金币兑换------------*/
.seckill_exchange{
	display: flex;
	background-color: #fff;
	margin-bottom: 1rem;
}
.seckill_exchange>div{
	width: 50%;
	padding: 1rem;
	box-sizing: border-box;
}
.seckill_exchange>div>img{
	width: 100%;
	display: block;
}
.seckill{
	border-right: 1px solid #cccccc;
}
.home_title{
	font-size: 1.6rem;
	font-weight: 600;
	color: #4F4F4F;
	display: flex;
	align-items: center;
	margin-bottom: 0.5rem;
}
.home_title span{
	width: 3px;
	height: 1.3rem;
	background-color: #FF6565;
	display: inline-block;
	margin-right: 0.3rem;
}
.countdown{
	display: flex;
	align-items: center;
	color: #FF6565;
	font-size: 1.4rem;
}
.countdown p{
	background-color: #FF6565;
	color: #FFFFFF;
	width: 2rem;
	height: 2rem;
	text-align: center;
	line-height: 2rem;
}
.countdown span{
	margin: 0 0.3rem;
}
.exchange_p{
	height: 2rem;
	padding-left: calc(3px + 0.3rem);
	color: #FF8512;
	font-size: 1.2rem;
}
/*-----------今天上新--------------*/
.new{
	background-color: #fff;
	padding: 1rem;
	box-sizing: border-box;
	margin-bottom: 1rem;
}
.new_title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.new_title .home_title{
	margin-bottom: 0;
}
.new_title>img{
	height: 0.8rem;
	display: block;
}
.new_list{
	display: flex;
}
.new_item{
	width: 24%;
	margin-right: 1.5%;
	padding-bottom: 0.3rem;
}
.new_item:last-child{
	margin-right: 0;
}
.good_img{
	width: 100%;
	position: relative;
	margin-bottom: 0.3rem;
}
.good_img>img{
	width: 100%;
	display: block;
}
.good_img .img_box{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.good_img .img_box img{
	width: 100%;
	display: block;
}
.new_item p{
	text-align: center;
	text-decoration: line-through;
	font-size: 1.2rem;
	color: #787878;
	margin-bottom: 0.3rem;
}
.new_item input{
	padding: 1px 0.5rem;
	border: 1px solid #FF6565;
	border-radius: 3px;
	font-size: 1rem;
	color: #FF6565;
	background-color: #fff;
	display: block;
	margin: 0 auto;
}
/*-----------潮流女装，时尚男装------------*/
.home_1{
	background-color: #fff;
	margin-bottom: 1rem;
}
.home_1>div{
	padding: 1.5rem 0 0.5rem 0;
	border-bottom: 1px solid #EEEEEE;
}
.home_1>div:last-child{
	border-bottom: none;
}
.home_1>div>img{
	width: 100%;
	display: block;
}
.home_1>div ul{
	padding: 1rem;
	box-sizing: border-box;
	display: -webkit-box;
	overflow-x: auto;
}
.home_1>div ul li{
	width: 30%;
	margin-right: 2%;
}
.home_1>div ul li img{
	width: 100%;
	display: block;
	margin-bottom: 0.3rem;
}
.home_1>div ul li p{
	width: 100%;
	white-space: nowrap;
	font-size: 1.2rem;
	color: #787878;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 0.3rem;
}
.home_1>div ul li div#price{
	display: flex;
	justify-content: space-between;
}
.home_1>div ul li div p:first-child{
	font-size: 1.2rem;
	color: #FF6565;
	text-decoration: line-through;
}
.home_1>div ul li div p:last-child{
	font-size: 1rem;
	color: #a9a9a9;
}
/*---------排序选择-------------*/
.screen{
	display: flex;
	background-color: #fff;
}
.screen div{
	width: 33.3%;
	height: 3rem;
	border-right: 1px solid #EEEEEE;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.2rem;
	color: #787878;
}
.screen div.screen_active{
	color: #FF6565;
}
.screen div img{
	height: 0.6rem;
	display: block;
	margin-left: 0.3rem;
}
.screen div:last-child{
	border-right: none;
}
/*----------任务列表-------------*/
.home_2{
	padding: 1rem;
	display: flex;
	flex-wrap: wrap;
}
.task_item{
	width: calc(50% - 0.5rem);
	background-color: #fff;
	margin-right: 1rem;
	margin-bottom: 1rem;
}
.task_item:nth-child(2n){
	margin-right: 0;
}
.task_item .task_img{
	width: 100%;
	position: relative;
}
.task_item .task_img img{
	width: 100%;
	display: block;
}
.task_item .task_img span{
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2px 5px;
	font-size: 1.2rem;
	color: #FFFFFF;
	background-color: #FF6565;
}
.task_text{
	padding: 0.5rem;
	padding-bottom: 1rem;
	box-sizing: border-box;
}
.task_title{
	display: flex;
	align-items: center;
}
.task_title img{
	height: 1.5rem;
	display: block;
	margin-right: 0.3rem;
}
.task_title p{
	width: calc(100% - 1.8rem);
	font-size: 1.4rem;
	color: #4F4F4F;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.task_price{
	display: flex;
	justify-content: space-between;
	margin-top: 0.5rem;
	font-size: 1.2rem;
}
.task_price p:first-child{
	color: #FF6565;
	text-decoration: line-through;
}
.task_price p:last-child{
	color: #787878;
}
.task_input{
	display: flex;
	justify-content: space-between;
	margin-top: 0.5rem;
}
.task_input input{
	width: 47%;
	height: 2.5rem;
	background-color: #FF6565;
	color: #FFFFFF;
	border-radius: 3px;
	border: none;
	font-size: 1.2rem;
}
.task_input p{
	width: 47%;
	height: 2.5rem;
	border: 1px solid #EEEEEE;
	box-sizing: border-box;
	text-align: center;
	line-height: 2.5rem;
	color: #4F4F4F;
	font-size: 1.2rem;
	border-radius: 3px;
}
.task_input p span{
	color: #FF6565;
}
/*---------新用户奖励-------------*/
#open_new_user{
	width: 3.5rem;
	display: block;
	position: fixed;
	right: 1rem;
	bottom: 20rem;
}
#close{
	width: 1.2rem;
	height: 1.2rem;
	background-color: rgba(0,0,0,0.4);
	border-radius: 50%;
	color: #FFFFFF;
	font-size: 0.8rem;
	display: block;
	text-align: center;
	line-height: 1.2rem;
	position: fixed;
	bottom: 24rem;
	right: 5rem;	
}
#new_user{
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 11;
}
#new_user .new_user{
	width: 70%;
}
#new_user .new_user .new_content{
	position: relative;
}
#new_user .new_user .new_content>img{
	width: 100%;
	display: block;
}
#new_user .new_user .new_content .new_user_text{
	width: 100%;
	height: 77%;
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 1rem 2rem;
	box-sizing: border-box;
}
.new_user_text li{
	font-size: 1.2rem;
	color: #4F4F4F;
	display: flex;
	align-items: center;
	margin-top: 1rem;
}
.new_user_text li>span{
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: #FF910C;
	display: block;
	margin-right: 1rem;
}
.new_user_text li p{
	line-height: 1.5em;
}
.new_user_text li p .new_red{
	color: #FE2437;
}
.new_user_text li p .new_orange{
	color: #FB8E10;
}
.new_user_text a{
	width: 60%;
	display: block;
	margin: 0 auto;
	margin-top: 2rem;
}
.new_user_text a img{
	width: 100%;
	display: block;
}
#new_user .new_user>img{
	width: 3rem;
	height: 3rem;
	display: block;
	margin: 0 auto;
	margin-top: 1.5rem;
}
.loading{
	padding-bottom: 6.5rem;
	text-align: center;
	color: #ccc;
}
</style>
